<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>popup</title>
    <link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
    <style type="text/css">
    .dialog-middle,.dialog-top,.dialog-bottom,.dialog-left,.dialog-right{
    	display:none;
    	background-color:white;
    	width:200px;
    	height:100px;
    	text-align:center;
    }
    </style>
</head>
<body ontouchstart="">
    <header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
            <h1 class="titlebar-title">弹出框</h1>
        </div>
    </header>
    <article>
    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">系统弹出框</p>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="alertBtn">alert</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="confirmBtn">confirm</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="actionsheetBtn">actionsheet</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="toastBtn">toast</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="promptBtn">prompt</button>
        </div>
        
        <div class="card" style="padding:10px 12px;">
        	<p class="color-primary" style="padding: 0 0 6px 0;">左弹出框</p>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftTopBtn">left-top</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftMiddleBtn">left-middle</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftBottomBtn">left-bottom</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftFullBtn">left-full</button>
    	</div>
    	
    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">右弹出框</p>
			<button class="button" style="padding:0 8px;margin:2px 0;" id="rightTopBtn">right-top</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="rightMiddleBtn">right-middle</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="rightBottomBtn">right-bottom</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="rightFullBtn">right-full</button>
    	</div>

    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">上弹出框</p>
    		<button class="button" style="padding:0 8px;margin:2px 0;" id="topLeftBtn">top-left</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="topCenterBtn">top-center</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="topRightBtn">top-right</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="topFullBtn">top-full</button>
    	</div>

    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">下弹出框</p>
    		<button class="button" style="padding:0 8px;margin:2px 0;" id="bottomLeftBtn">bottom-left</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="bottomCenterBtn">bottom-center</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="bottomRightBtn">bottom-right</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="bottomFullBtn">bottom-full</button>
    	</div>

    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">中弹出框</p>
    		<button class="button" style="padding:0 8px;margin:2px 0;" id="middleBtn">middle</button>
    	</div>
	</article>
	<!--自定义弹出框-->
	<div id="ID-Dialog-Mid" class="dialog-middle">中间弹出框</div>

    <div id="ID-Dialog-TopLeft" class="dialog-top">头部弹出框</div>
    <div id="ID-Dialog-TopCenter" class="dialog-top">头部弹出框</div>
	<div id="ID-Dialog-TopRight" class="dialog-top">头部弹出框</div>
	<div id="ID-Dialog-TopFull" class="dialog-top" style="width:100%">头部弹出框</div>

    <div id="ID-Dialog-BtmLeft" class="dialog-bottom">底部弹出框</div>
    <div id="ID-Dialog-BtmCenter" class="dialog-bottom">底部弹出框</div>
    <div id="ID-Dialog-BtmRight" class="dialog-bottom">底部弹出框</div>
    <div id="ID-Dialog-BtmFull" class="dialog-bottom" style="width:100%">底部弹出框</div>

    <div id="ID-Dialog-LeftTop" class="dialog-left">左边弹出框</div>
    <div id="ID-Dialog-LeftMid" class="dialog-left">左边弹出框</div>
    <div id="ID-Dialog-LeftBtm" class="dialog-left">左边弹出框</div>
    <div id="ID-Dialog-LeftFull" class="dialog-left" style="height:100%">左边弹出框</div>

    <div id="ID-Dialog-RightTop" class="dialog-right">右边弹出框</div>
    <div id="ID-Dialog-RightMid" class="dialog-right">右边弹出框</div>
    <div id="ID-Dialog-RightBtm" class="dialog-right">右边弹出框</div>
    <div id="ID-Dialog-RightFull" class="dialog-right" style="height:100%">右边弹出框</div>

    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script type="text/javascript">
		/*
		 * 系统弹出框
		 */
		//alert
		var popAlert=new Alert("我是Alert框我是Alert框我是Alert框我是Alert框",{"title":false});
	    document.getElementById("alertBtn").onclick=function(){
			popAlert.show();
	    };
		//confirm
		var popConfirm=new Alert("我是Confirm框",{
			onClickOk:function(e){
				console.log(e.target);
			},onClickCancel:function(e){
				console.log(e.target);
				e.hide();
			}
		});
		document.getElementById("confirmBtn").onclick=function(){
			popConfirm.show();
	    };
		
		//toast
		var popToast=new Toast("提示信息");
		document.getElementById("toastBtn").onclick=function(){
			popToast.show();
	    };
	    var c;
	    //actionsheet
	    var t=new Toast("您点击了菜单一");
	    var actionAlert=null;
		var actionsheet=new Actionsheet({
			data:[
				{
					text : '菜单一',
			        handler : function(s){
			        	console.log(s.target);
			        	t.setText("您点击了菜单一");
			        	t.show();
			        }
				},{
					text : '菜单二',
			        handler : function(s){
			        	console.log(s.target);
			        	t.setText("您点击了菜单二");
			        	t.show();
					}
			    },{
					text : '退出',
			        handler : function(s){
			        	if(!actionAlert){
				        	actionAlert=new Alert();
				        	actionAlert.setText("您确定要退出吗？");
				        	actionAlert.setOnClickOk(function(e){
				        		s.hide();
				        		e.hide();
				        	});
				        	actionAlert.setOnClickCancel(function(e){
				        		e.hide();
				        	});
			        	}
			        	s.hide();
						actionAlert.show();
					}
			    }
			],
			onClickCancel:function(s){
				t.setText("您点击了取消按钮");
			    t.show();
			    s.hide();
			}
		});
		document.getElementById("actionsheetBtn").onclick=function(){
			//actionsheet.setParams(actionsheetParams);
			actionsheet.show();
	    };
	    //Prompt框
	    var prompt=new Prompt();
	    document.getElementById("promptBtn").onclick=function(){
	    	prompt.setText("更新成功");
	    	prompt.show();
	    };

		//middle
		var dialogMid=new Dialog("#ID-Dialog-Mid",{
			overflowContainer:null,
			position:"middle",
			onClick:function(e){console.log(e.target)},
			onShowed:function(e){
				console.log("显示");
			},
		});

		document.getElementById("middleBtn").onclick=function(){
			dialogMid.show();
	    };
		//top
		var topLeftDialog=new Dialog("#ID-Dialog-TopLeft",{
			position:"top",
			animation:"zoom"
		});
		document.getElementById("topLeftBtn").onclick=function(){
			topLeftDialog.show();
	    };
	    var topCenterDialog=new Dialog("#ID-Dialog-TopCenter",{
			position:"top-center",
			animation:"zoom"
		});
		document.getElementById("topCenterBtn").onclick=function(){
			topCenterDialog.show();
	    };
	    var topRightDialog=new Dialog("#ID-Dialog-TopRight",{
			position:"top-right",
			animation:"zoom"
		});
		document.getElementById("topRightBtn").onclick=function(){
			topRightDialog.show();
	    };
	    var topFullDialog=new Dialog("#ID-Dialog-TopFull",{
			position:"top-center",
			animation:"slideDown",
			css:{width:"100%"}
		});
		document.getElementById("topFullBtn").onclick=function(){
			topFullDialog.show();
	    };

		//bottom
		var btmLeftDialog=new Dialog("#ID-Dialog-BtmLeft",{
			position:"bottom",
			animation:"zoom"
		});
		document.getElementById("bottomLeftBtn").onclick=function(){
			btmLeftDialog.show();
	    };
	    var btmCenterDialog=new Dialog("#ID-Dialog-BtmCenter",{
			position:"bottom-center",
			animation:"zoom"
		});
		document.getElementById("bottomCenterBtn").onclick=function(){
			btmCenterDialog.show();
	    };
	    var btmRightDialog=new Dialog("#ID-Dialog-BtmRight",{
			position:"bottom-right",
			animation:"zoom"
		});
		document.getElementById("bottomRightBtn").onclick=function(){
			btmRightDialog.show();
	    };
	    var bottomFullDialog=new Dialog("#ID-Dialog-BtmFull",{
			position:"bottom-center",
			animation:"slideUp",
			css:{width:"100%"}
		});
		document.getElementById("bottomFullBtn").onclick=function(){
			bottomFullDialog.show();
	    };

		//left
		var leftDialog=new Dialog("#ID-Dialog-LeftTop",{
			position:"left",
			animation:"slideRight"
		});
		document.getElementById("leftTopBtn").onclick=function(){
			leftDialog.show();
	    };
	    var leftMiddleDialog=new Dialog("#ID-Dialog-LeftMid",{
			position:"left-middle",
			animation:"slideRight"
		});
		document.getElementById("leftMiddleBtn").onclick=function(){
			leftMiddleDialog.show();
	    };
	    var leftBottomDialog=new Dialog("#ID-Dialog-LeftBtm",{
			position:"left-bottom",
			animation:"slideRight"
		});
		document.getElementById("leftBottomBtn").onclick=function(){
			leftBottomDialog.show();
	    };
	    var leftFullDialog=new Dialog("#ID-Dialog-LeftFull",{
			position:"left-middle",
			animation:"slideRight",
			css:{height:"100%"}
		});
		document.getElementById("leftFullBtn").onclick=function(){
			leftFullDialog.show();
	    };

		//right
		var rightTopDialog=new Dialog("#ID-Dialog-RightTop",{
			position:"right",
			animation:"slideLeft"
		});
		document.getElementById("rightTopBtn").onclick=function(){
			rightTopDialog.show();
	    };
	    var rightMiddleDialog=new Dialog("#ID-Dialog-RightMid",{
			position:"right-middle",
			animation:"slideLeft"
		});
		document.getElementById("rightMiddleBtn").onclick=function(){
			rightMiddleDialog.show();
	    };
	    var rightBottomDialog=new Dialog("#ID-Dialog-RightBtm",{
			position:"right-bottom",
			animation:"slideLeft"
		});
		document.getElementById("rightBottomBtn").onclick=function(){
			rightBottomDialog.show();
	    };
	    var rightFullDialog=new Dialog("#ID-Dialog-RightFull",{
			position:"right-middle",
			animation:"slideLeft",
			css:{height:"100%"}
		});
		document.getElementById("rightFullBtn").onclick=function(){
			rightFullDialog.show();
	    };

	    //定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>